import React from 'react';
import {
  AlignCenterOutlined,
  ZoomInOutlined,
  ZoomOutOutlined,
} from '@ant-design/icons';
import Container from 'components/Container';
import Button from 'components/BtnComponent';
import styles from './index.module.less';

const GraphTitle = ({
  handleFunc,
  type,
  setVisible,
  handleSave,
}) => {
  const {
    zoomIn,
    zoomOut,
    focusItem,
  } = handleFunc;

  return (
    <Container flex alignItems="center" justify="space-between" padding={16} className={styles.title}>
      <Container>
        <AlignCenterOutlined onClick={focusItem} />
        <ZoomInOutlined onClick={zoomIn} />
        <ZoomOutOutlined onClick={zoomOut} />
      </Container>
      {type === 'edit' && (
        <Container strength style={{ minWidth: '258px' }}>
          <Button onClick={() => { setVisible(true); }}>配置</Button>
          <Button type="gray" style={{ marginLeft: '12px' }}>保存</Button>
          <Button type="gray" style={{ marginLeft: '12px' }} >返回</Button>
        </Container>
      )}
    </Container>
  );
};

export default GraphTitle;
